<script setup lang="ts">
import { Icon } from '@iconify/vue'

const props = defineProps({
  icon: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '16',
  },
  width: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: '',
  },
})

const style = {
  width: props.width || props.size,
  height: props.height || props.size,
}

const iconName = computed(() => props.icon)
</script>

<template>
  <Icon :icon="iconName" :color="color" :style="style" />
</template>

<style scoped>
svg {
  display: inline-block;
  overflow: hidden;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentcolor;
}
</style>
